<template>

  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#f2f3f5"
      @select="handleSelect"
  >
    <el-menu-item index="1" style="font-size: 20px">
      <el-icon style="color: #ffd04b;font-size: 30px">
        <UserFilled /></el-icon>篝火币充值</el-menu-item>
    <div class="flex-grow"/>
    <el-menu-item style="left: 580px">使用兑换码</el-menu-item>
  </el-menu>

  <div style="width: 800px;height: 1200px">
    <el-row>
      <el-col :span="8"><el-card  @click="amountPaid=186" style="width: 230px;height: 110px;margin-top: 20px;background-color: #ece0b6; border: 3px solid darkorange">

        <div style="background-color: crimson;width: 60px;height: 20px; position: relative;top: -38px;right: 20px; border-radius: 5px">
          <p style="color: #cccccc">5折优惠</p>
        </div>
        <p style="font-size: 18px;position: relative;top: -50px;right: 10px">年度优惠</p>
        <p style="font-size: 18px;position: relative;top: -50px;right: 10px;color: #ee9900">￥<i style="font-size:30px ">186</i></p>
        <s style="position: relative;top: -93px;left: 100px">￥365</s>
      </el-card></el-col>

      <el-col :span="8"><el-card @click="amountPaid=92" style="width: 230px;height: 110px;margin-top: 20px;background-color: #ece0b6; border: 3px solid darkorange">

        <div style="background-color: crimson;width: 60px;height: 20px; position: relative;top: -38px;right: 20px; border-radius: 5px">
          <p style="color: #cccccc">5折优惠</p>
        </div>
        <p style="font-size: 18px;position: relative;top: -50px;right: 10px">半年优惠</p>
        <p style="font-size: 18px;position: relative;top: -50px;right: 10px;color: #ee9900">￥<i style="font-size:30px ">92</i></p>
        <s style="position: relative;top: -93px;left: 100px">￥184</s>
      </el-card></el-col>

      <el-col :span="8"><el-card @click="amountPaid=23" style="width: 230px;height: 110px;margin-top: 20px;background-color: #ece0b6; border: 3px solid darkorange">

        <div style="background-color: crimson;width: 60px;height: 20px; position: relative;top: -38px;right: 20px; border-radius: 5px">
          <p style="color: #cccccc">5折优惠</p>
        </div>
        <p style="font-size: 18px;position: relative;top: -50px;right: 10px">月度优惠</p>
        <p style="font-size: 18px;position: relative;top: -50px;right: 10px;color: #ee9900">￥<i style="font-size:30px ">23</i></p>
        <s style="position: relative;top: -93px;left: 100px">￥46</s>
      </el-card></el-col>
    </el-row>
    <h1>专属权益</h1>
    <h1>
      <el-popover
          placement="top-start"
          title="篝火"
          :width="260"
          trigger="hover"
          content="联合字节技术推出的会员专属权益。会员期内可免费学习字节内部技术课程，以此了解大厂人的工作方式，拓宽思路和眼界。"
      >
        <template  #reference>
          <el-button style="width: 260px;height: 60px" class="m-2">
            <el-icon  style="font-size: 30px;color: #ee9900"><Reading /></el-icon>字节内部课</el-button>
        </template>
      </el-popover>
      <el-popover
          placement="top-start"
          title="篝火"
          :width="260"
          trigger="hover"
          content="专属周边篝火指定周边任选其一。"
      >
        <template  #reference>
          <el-button style="width: 260px;height: 60px" class="m-2">
            <el-icon style="font-size: 30px;color: #ee9900"><GoodsFilled /></el-icon>小册全场7折</el-button>
        </template>
      </el-popover>
    </h1>

    <h1 style="height:80px ">
      <el-popover
          placement="top-start"
          title="篝火"
          :width="260"
          trigger="hover"
          content="价值69.9元，原价69.9元以内小册任选，不可和优惠叠加使用。"
      >
        <template  #reference>
          <el-button style="width: 260px;height: 60px" class="m-2">
            <el-icon  style="font-size: 30px;color: #ee9900"><Ticket /></el-icon>小册对换卷</el-button>
        </template>
      </el-popover>

      <el-popover
          placement="top-start"
          title="篝火"
          :width="260"
          trigger="hover"
          content="会员将被邀请加入会员专属社群，与全国各地的会员朋友们沟通交流。专属客服将在社群中第一时间反馈会员的提问与要求。"
      >
        <template  #reference>
          <el-button style="width: 260px;height: 60px" class="m-2">
            <el-icon style="font-size: 30px;color: #ee9900"><Avatar /></el-icon>专属社区&群服务</el-button>
        </template>
      </el-popover>

      <el-popover
          placement="top-start"
          title="篝火"
          :width="260"
          trigger="hover"
          content="会员有效期内购买掘金小册，可享受全场7折优惠。"
      >
        <template  #reference>
          <el-button style="width: 260px;height: 60px;position: relative;left: 535px;bottom: 60px" class="m-2">
            <el-icon style="font-size: 30px;color: #ee9900"><Flag /></el-icon>活动优先参加</el-button>
        </template>
      </el-popover>

    </h1>

    <div class="alignment-container">
      <el-space style="padding-left: 260px ;
             box-sizing: border-box;
             height: 60px;
           font-size: 23px;">
        实付款 <h1 style="color: rgba(255,0,0,0.7);font-size: 30px">￥</h1>
        <h1 style="color: rgba(255,0,0,0.7);font-size: 50px;margin: 0">{{amountPaid}}</h1>
        <s style="font-size: 15px;color: rgba(51,51,51,0.74)">￥{{ amountPaid*2 }}</s>
      </el-space>



      <el-button style="float: right; font-size: 20px;background-color: rgba(238,153,0,0.47); border-radius: 40px;height: 50px;width: 230px"
                 text @click="pay()" >
        确认协议并支付
      </el-button>
      <el-button style="padding-left: 580px;top: 20px"  text @click="centerDialogVisible = true">
        开通前请阅读
        <a style="text-decoration: none;color: rgba(0,0,255,0.84);">《篝火优惠协议》</a>
      </el-button>


<!--      <el-dialog style="width: 1000px;height: 800px" v-model="outerVisible"-->
<!--                 title="订单提交成功，请尽快完成付款！支付订单号：SP2023122818374701442166266310-->
<!--                 请在倒计时 55分04秒 前完成支付，否则订单会被自动取消">-->

<!--        <div class="alignment-container" style="width: 950px;height: 650px">-->
<!--          <el-space style="font-size: 25px">请选择支付方式</el-space>-->
<!--          <el-button> 扫码支付 </el-button>-->
<!--          <el-space style="padding-left: 400px ;-->
<!--             box-sizing: border-box;-->
<!--             height: 30px;-->
<!--           font-size: 18px;">-->
<!--            应付金额<h1 style="font-size: 30px">￥</h1>-->
<!--            <h1 style="font-size: 40px;margin: 0">182.00</h1>-->
<!--          </el-space>-->
<!--          <p style="padding-left: 750px">优惠支付：购买</p>-->

<!--          <div style="padding-left: 400px;position: relative;top: 100px">-->
<!--            <p style="padding-left: 20px;margin: 0">扫一扫付款(元)</p><h1 style="font-size: 40px;margin: 0">182.00</h1>-->

<!--            <div class="alignment-container" style="width: 450px;height: 200px;position: relative;right: 160px">-->
<!--            <p>支持一上应用扫码方式</p>-->
<!--          </div>-->

<!--          </div>-->
<!--        </div>-->
<!--      </el-dialog>-->
      <div  style="padding-left: 260px; width: 200px; position: relative;top: -27px">
        <p style="font-size: 15px;color: rgba(51,51,51,0.74);margin: 0">
          <s style="font-size: 15px;color: rgba(51,51,51,0.74)">￥{{ amountPaid*2 }}</s>
          (原价)-￥{{amountPaid}}(5折优惠)</p>
      </div>
      <el-dialog style="width:500px;height: 500px;
            border: 1px solid rgba(255, 0, 0, 0.47);
            overflow: hidden;
            overflow: visible;/*默认visible显示*/
            overflow: scroll;/*滚动显示*/" v-model="centerDialogVisible" title="篝火会员协议" width="30%" center>
    <span>发布时间：【2023】年【11】月【21】日
生效时间：【2023】年【11】月【28】日

【导言】
欢迎您使用篝火会员服务！
篝火会员服务由篝火的所有者开发，旨在为您提供付费的增值会员权益。为使用篝火会员服务（简称“本服务”），请您仔细阅读、充分理解并遵守《稀土掘金会员服务协议》（简称“本协议”）。本协议项下稀土掘金会员又称“您”、“用户”或“会员”。
本协议由您与北京北比信息技术有限公司（简称为“我们”或“公司”）共同缔结，具有合同效力。请您务必审慎阅读、充分理解本协议各条款内容，特别是免除或限制责任的相应条款。我们将以加粗或斜体加粗等形式提示您注意限制、免责条款。请您在确认同意本协议或在使用本服务之前务必仔细阅读前述条款，并在您自愿接受该等条款的前提下使用本服务。
若您不同意本协议的任意或全部条款内容，尤其是前述可能与您的权益存在重大利害关系的条款，请立即停止使用本服务，且不要以接受本服务的形式（包括但不限于进入购买程序、进行或参与任何与本服务相关的交易或活动、采用任何其他形式的确认操作，下统称“接受服务的形式”）进行下一步操作。当您采用接受服务的形式进行下一步操作或使用本服务，即表明您已阅读、理解并同意签署本协议，表示您与公司已达成协议关系，并自愿遵守本协议的全部约定，本协议将对您产生法律效力。
若您未满18周岁，请您在监护人陪同下仔细阅读，并且仅在监护人监护、指导且获得监护人同意的情况下使用本服务。


一、协议的定义及说明


1.稀土掘金会员：

稀土掘金会员是通过标注名称为“稀土掘金”的网页端、手机移动端应用及其他方式等（以下简称“稀土掘金”）注册用户账号，并且购买了增值会员权益的稀土掘金用户（以下简称“会员”）。在您登录稀土掘金并购买稀土掘金会员权益后，您将在会员时长有效期内享有稀土掘金会员权益。

2.会员服务协议：

本协议是您与公司之间就稀土掘金会员服务相关事宜的约定，本协议与《稀土掘金用户协议》《稀土掘金隐私政策》等协议/制度构成统一整体（以下合称“稀土掘金规则”）。本协议与稀土掘金规则存在冲突的，以本协议为准；本协议未约定事项，以稀土掘金规则中的相应规定为准。
本协议内容同时包括稀土掘金已经发布或在未来不时发布的与本协议有关的相关协议、业务规则、附加条款、产品要求等内容。前述内容一经正式生效，即成为本协议不可分割的组成部分。
二、会员账号管理及使用规则

1.会员注册

在成为会员之前，您必须先以真实、准确的信息根据《稀土掘金用户协议》注册成为稀土掘金的用户，否则我们有权拒绝您申请或撤销您会员资格，并不予任何赔偿或退还会员服务费。如果您的个人资料发生变化，您应及时修改注册的个人资料，否则由此造成的会员权利不能全面有效行使、会员权益无法正常享受、账号被他人使用等责任由会员自己承担。
用户可自行通过各种已有和未来新增的合法渠道成为稀土掘金会员。任何情况下，用户不得利用稀土掘金会员服务进行盈利或非法获利，不以任何形式转让或转移用户享有的会员权益。我们在此声明：公司从未授权任何第三方单位或个人销售、转让稀土掘金会员资格，任何未经公司授权销售或转让稀土掘金会员资格的，公司有权追究其法律责任。
会员不得以盗窃他人账号、利用系统漏洞等非法途径以及在未获公司授权的非法销售稀土掘金会员的网站上获取或购买会员服务，一经发现，公司有权立即采取限制账号权限、暂停账号服务等账号管理措施，由此引发的问题由会员自行承担，公司不负任何责任。
您应自行负责妥善地保管、使用、维护您在稀土掘金的账号及密码，并采取必要和有效的保密措施。非因公司过错致使您账号或密码泄漏等造成损失的，公司无需承担责任。
公司仅提供相关的会员权益服务，除此之外与相关网络服务有关的设备（如个人电脑、手机、及其他与接入互联网或移动网有关的装置）及所需的费用（如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费）均应由会员自行承担。
2.会员权益

稀土掘金会员权益，包括免费券、专属客服等。您在购买稀土掘金会员后可享受的具体会员权益可以在稀土掘金中﹣【我的】-【会员中心】﹣点击任一会员权益查看相应会员权益的说明。公司有权基于自身业务发展需要变更部分或全部会员权益，您已经购买的会员权益将不受负面影响。就前述权益调整，公司将提前在相应服务页面进行通知或公告。
为免歧义，除非上述页面有相反说明，会员权益不包括“免广告”或类似功能，公司可能在稀土掘金相关页面或以其他任何方式投放广告或商业信息，会员权益也不意味着用户可免费访问稀土掘金站内全部内容。
3.会员使用、服务期限

本服务期限自会员资格开通之日起算，具体有效期限可以在会员个人页面查看。会员可以延长会员服务有效期，否则，稀土掘金将在会员资格到期后停止提供相应会员权益。
您理解、知悉并同意，在本服务的服务期间，因公司解决故障、服务器维修、调整、升级及不可抗力事件等可能导致的服务临时中断，公司将尽快修复相关服务，除非法律法规另有强制性规定，公司不另行补偿该等服务中断的时间。
会员服务仅限于申请会员资格的账号持有者本人自行使用；会员服务期内会员权益不能在稀土掘金不同账号之间转移，当同一账号在网站、安卓、 IOS 不同端登录时，会员状态将会自动同步。
您使用稀土掘金时的设备或软件版本型号可能影响您正常享受稀土掘金会员权益。当前述情况出现时，我们将建议您更换设备或及时升级，以免影响您正常享受全部会员权益。
禁止用户之间赠与、借用、租用、转让或售卖会员账号。在公司合理怀疑存在前述情况时，公司有权在未经通知的情况下暂停账号功能，暂停账号由此带来的损失由会员自行承担。
4.会员使用规则

若会员的行为违反国家相关法律法规或违反本协议，或公司认为会员行为有损稀土掘金或他人的声誉及利益，公司有权视违法、违规或侵权的严重程度，采取事先警示、拒绝发布、立即停止传输信息、删除跟帖、短期禁止发言、限制账号部分或者全部功能直至永久关闭账号等措施取消该会员的会员资格而无须承担任何责任或给予任何补偿。
被取消会员资格的会员，将不再享有会员权益。
未经公司以及相关权利人的书面许可，稀土掘金提供的会员服务内容不得用于商业、经营、盈利等用途；任何用户不得利用会员服务进行复制、下载、发行、销售、展示、传播会员服务提供的内容，或从事任何违反法律法规规定或本协议规定的行为，包括但不限于下列情况：
通过非法手段对稀土掘金会员账户的服务期限、消费金额、交易状态进行修改，或用非法的方式或为了非法的目的使用已购买的会员服务提供的内容；
将您的会员账户有偿或无偿提供给任何第三人，并允许他人通过您的账户使用稀土掘金会员服务；
将使用会员服务所获得的内容复制、销售、出租或授权给任何第三方；
对公司用于保护会员服务提供的任何安全措施技术进行破解、更改、反向操作、破坏或其他篡改，或协助他人进行上述行为；
通过不正当的方式（如盗用或购买他人账号等）获得会员服务提供的权益内容，或者删除会员服务提供的内容上的任何所有权声明或标签；
采用收费或免费的方式，全部或部分在任何公开场合展示稀土掘金会员服务提供的内容，除非该等行为根据法律法规的规定不会构成侵权；
损害第三方利益，通过稀土掘金收集他人资料信息，破坏或盗取他人账号，向其发送诈骗邮件和垃圾邮件等非法信息，侵犯第三方合法权益（包括但不限于隐私权、知识产权、财产权等）的。
稀土掘金会员服务对应的权益只可供会员账户所有者本人浏览稀土掘金网站内容时使用和享有。因会员擅自使用会员服务相关内容引发的争议或纠纷，公司不承担任何责任，如果因此造成公司损失的，您还应赔偿由此造成的公司损失。
5.收费服务

您理解并同意，会员服务为付费服务，是您购买的会员权益对应服务的价格，而非用户账户中的预付款或储值。公司收取的是针对前述会员权益的互联网增值服务使用费；您可以在相关服务页面查阅会员服务具体期限及对应费用并自行选择享受相应的服务。开启会员服务功能后，无论您是否在相应服务期限内实际使用该服务，已支付的费用不支持退款，但法律法规要求必须退款的情形或本协议约定的可以退款的情形除外。
稀土掘金会员费以您购买稀土掘金会员时，稀土掘金在会员服务页面标示的价格为准。稀土掘金将不时推出优惠活动，并在会员服务页面公示活动信息及活动价格。
您理解并同意，公司有权自行决定并修订提供服务收费方式和收费标准。收费标准及规则变更前，公司将在相应服务页面对修改的内容进行提前通知或公告 ，该等修改生效后将构成本协议的有效组成部分。如您不同意前述标准、规则及其修订，您有权停止使用本服务或在会员服务有效期结束后不再续费。您继续使用本服务即视为您同意相关内容。
三、会员个人信息收集、使用及保护

您充分理解并同意：为了更好的向您提供稀土掘金会员服务，我们可以通过短信、电话等方式或在稀土掘金网站、应用中向您提供关于稀土掘金的活动信息、推荐信息、推广信息等各类信息。如您不希望接收此类信息，可选择不再接收前述信息。
保护您的信息及隐私是我们的一项基本原则。我们与您一同致力于您个人信息（即能够独立或与其他信息结合后识别用户身份的信息）的保护。在使用稀土掘金会员服务的过程中，您可能需要提供您的个人信息（包括但不限于您登录稀土掘金时的账号下的个人信息，如您向稀土掘金提供的手机号码等），以便我们向您提供相应的服务和技术支持。公司将运用加密技术、匿名化处理等其他与稀土掘金及相关服务相匹配的技术措施及其他安全措施保护你的个人信息。我们将根据法律法规的要求以及《稀土掘金隐私政策》保护您的个人信息。
四、违约责任

1.违约行为

您在使用本服务的过程中，不得从事以下行为：

违反法律、法规、规章、条例以及任何具有法律效力之规范规定的；
进行危害计算机网络安全的行为；
对公司及关联第三方（包括授权方和合作方）提供的本协议服务、活动造成破坏或影响，或者以其他方式侵犯公司及／或关联第三方及／或其他用户的正当利益的；
侵犯任何第三方的合法权益的；
违反本协议约定或其他稀土掘金规则的；
利用本服务获取不正当利益的，包括但不限于通过转售、转让、转授权、出租、出借等形式将账户提供给第三方使用，或者向第三方提供会员服务内容的；
其他违反诚实信用原则或侵犯公司合法利益的行为。
2.违约行为处理

稀土掘金享有对会员网上一切活动的监督、提示、检查的权利，如会员的行为违反有关法律法规或违反本协议条款的约定，公司有权要求会员纠正其行为，并有权根据实际情况独立判断并视情况采取预先警示、拒绝发布、立即停止传输信息、删除跟帖、短期禁止发言、限制账号部分或者全部功能直至永久关闭账号等措施。公司有权公告处理结果，且有权根据实际情况决定是否恢复相关账号的使用。对涉嫌违反法律法规、涉嫌违法犯罪的行为将保存有关记录，并依法向有关主管部门报告、配合有关主管部门调查。

3.赔偿责任

因您违反本协议或其他服务条款规定，引起第三方投诉或诉讼索赔的，您应当自行处理并承担全部可能由此引起的法律责任。因您的违法、侵权或违约等行为导致公司及其关联公司向任何第三方赔偿或遭受国家机关处罚的，您还应足额赔偿公司及其关联公司因此遭受的全部损失。

五、免责声明

稀土掘金向会员提供的全部服务，均仅限于会员在稀土掘金使用，任何以破解、转译等非法手段将稀土掘金提供的服务内容与稀土掘金分离的行为，均不属于本协议中约定的稀土掘金提供的会员服务。由此引起的一切法律后果由行为人负责，稀土掘金将依法追究行为人的法律责任。
您明确了解并同意，稀土掘金会员的付费方式为代收费运营商托收的付款方式，您通过此种付费方式付费可能存在一定的商业风险，包括但不限于不法分子利用您账户或银行卡等有价卡等进行违法活动，该等风险均会给您造成相应的经济损失。您应自行承担向侵权方追究侵权责任和追究责任不能的后果。
由于会员未能妥善保管账号信息及密码、将账号密码告知他人或与他人共享注册账号，由此导致的任何个人资料泄露或损失，我们不承担与此有关的任何责任。
您理解并同意，使用本服务的过程中，可能因电信和网通部门的通讯线路故障、网络或电脑故障、系统不稳定、不可抗力（如服务器原因）、第三方原因等非稀土掘金原因受到影响，公司将努力在第一时间及时修复，但因不可抗力造成的损失，公司在法律法规范围内免于承担责任。
六、知识产权
1.您确认了解并同意遵守《稀土掘金用户协议》中关于知识产权的约定。

2.如果您在使用本服务的过程中可能涉及第三方知识产权的使用，且该第三方权利人对您基于本协议使用该等知识产权有要求的，您应当确保该等使用已经取得第三方权利人的同意，并且您应当在使用时确保遵守权利人的要求。

七、【服务的中止、终止及变更】
1.变更

公司可能因为相关业务规划或应法律法规、政策调整，对本协议及相关稀土掘金规则内容进行修改，我们将以公告或适当的方式在实施前提前公示修改内容。如您不同意本协议的修改，请您立即停止使用本服务，且不要以接受服务的形式进行下一步操作。用户继续使用本服务或进行下一步操作将被视为同意修改后的稀土掘金规则。

2.中止和终止

您可以通过到期不续费的方式主动终止会员服务。
您理解并同意因发生稀土掘金不可抗拒的事由，如政府行为、不可抗力，导致会员服务无法继续，我们会以最快的速度通知会员，并在客户端及网站主页面显著位置持续公示相关信息，对于由此对会员造成的任何损失，我们在法律法规范围内免于承担责任。
若会员违反或被视为违反本服务条款中的内容，我们有权视该违约情况的严重程度在不通知会员的情况下立即解除本协议，终止您已购买的所有服务，以及取消您的稀土掘金会员账户和使用权限，且不退还任何已缴纳的会员服务费用。
如在您购买的会员服务有效期内，因稀土掘金原因导致会员服务无法继续，我们将以最快的速度通知会员，并在客户端及网站主页面显著位置持续公示相关信息，对于剩余期限的会员服务费用我们将全额退还。
如在您购买的会员服务有效期内，您选择注销稀土掘金账号的，即代表您放弃您会员账户内所享有的全部权益，一旦账户完成注销，所有会员权益将不可再使用，您不可以此为由向稀土掘金主张任何权益或费用。您重新使用同一手机号、邮箱等注册稀土掘金账号后相应权益亦不可恢复。
稀土掘金未行使或延迟行使其在本协议项下的权利并不构成对这些权利的放弃，而单一或部分行使其在本协议项下的任何权利并不排斥其任何其它权利的行使。我们随时有权要求您继续履行义务并承担相应的违约责任。
八、其他
1.协议生效

当您采用接受本服务的形式进行下一步操作、使用或继续使用本服务，即表明您已阅读并同意受本协议的约束。

2.协议签订地

本协议签订地为中华人民共和国北京市海淀区。

3.适用法律和争议解决

本服务条款的生效、履行、解释及争议的解决均适用中华人民共和国大陆地区法律，本服务条款因与中华人民共和国大陆地区现行法律相抵触而导致部分无效，不影响其他部分的效力。如就本协议内容或其执行发生任何争议，应尽量友好协商解决；协商不成时，任何一方均可向对本协议签订地有管辖权的人民法院提起诉讼。

4.条款标题

本协议中的标题仅为方便及阅读而设，并不影响本协议中任何规定的含义或解释。

5.条款效力

本协议条款无论因何种原因部分无效或不可执行，其余条款仍有效，对双方具有约束力。

6.通知

本协议项下稀土篝火对于用户的所有通知均可通过网页公告、站内消息、客户端推送、用户预留手机短信等方式进行，该等通知于发布之日起视为已送达用户。为便于您收取并了解相关通知，您应确保预留的联系方式为正确及有效，并在变更后及时登录账号进行修改；如因您未提供正确的联系信息，或未及时告知新的联系方式，导致无法及时收取通知，将由您自行承担由此产生的损失及法律后果。

7.联系篝火服务

如您对本《篝火会员服务协议》或使用稀土掘金的会员服务相关的事宜有任何问题（包括问题咨询、投诉等），请通过 feedback@xitu.io 邮箱与我们联系，我们会在收到您的意见和反馈后尽快向您回复。
    </span>
      </el-dialog>
    </div>
    <h1 style="color: #9a6e3a;position: relative;left: 300px;top: 30px">为何选择篝火优惠活动？ <br>
      <el-icon style="margin:0;left: 80px "><ArrowDownBold /></el-icon><br>
      </h1>
    <h1 style="position: relative;font-size: 35px;left: 300px;top: 30px">
      优惠专享福利</h1>

    <el-tabs style="position: relative;top: 30px" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-collapse  accordion>
        <el-collapse-item  name="1">
          <template  #title style="font-size: 30px">
            <h1>内容1: 什么是达内内部课</h1>
          </template>
          <div style="font-size: 20px">
            达内内部课是篝火联合字节技术团队推出的优惠活动专享课程，在活动有效期内可以免费学习，零距离感受大厂技术人的工作与学习方式，了解大厂优秀实践。
          </div>
        </el-collapse-item>

        <el-collapse-item name="2">
          <template #title>
            <h1>内容2: 如何使用优惠专属兑换券？</h1>
          </template>
          <div style="font-size: 20px">
            69.9元兑换券只能用于 原价 ≤69.9元的小册，此优惠券 不叠加 其他折扣优惠使用。
          </div>
        </el-collapse-item>

        <el-collapse-item name="3">
          <template #title>
            <h1>内容3: 我参加优惠，实物礼品什么时候发货</h1>
          </template>
          <div style="font-size: 20px">
            发货日期，举例：7月17号购买的在21号发货，7月21号购买的在28号发货， 节假日顺延

            <div class="block">
              <span class="demonstration">日历</span>
              <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="到"
                  start-placeholder="起始时间"
                  end-placeholder="结束时间"
              />
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template #title>
            <h1>内容4: 活动优惠过期了，再续费还是旧版权益还是新版权益？</h1>
          </template>
          <div style="font-size: 20px">
            新版权益，即一张69.9兑换券+实物周边任选一个
          </div>
        </el-collapse-item>
        <el-collapse-item name="5">
          <template #title>
            <h1>内容5: 旧版活动过期了，我的权益未使用完毕，我可以继续使用吗？</h1>
          </template>
          <div style="font-size: 20px">
            优惠活动的情况下，权益仍旧在您的账户中，并不进行回收，兑换券还可以使用，但是借阅卡、珊瑚不能使用。如需使用需要参加优惠充值活动
          </div>
        </el-collapse-item>
        <el-collapse-item name="6">
          <template #title>
            <h1>内容6: 已经购买活动优惠，是否可以退款？</h1>
          </template>
          <div style="font-size: 20px">
            虚拟商品开通权益已经下发，因此 不支持退款 。建议您在购买前仔细了解篝火活动权益，如对权益有疑问及时跟赵小饼沟通。
          </div>
        </el-collapse-item>
      </el-collapse>
      </el-tabs>
    <p style="position: relative;top: 40px;left: 570px" >添加好友<br>
      更多问题解答<br>
      扫描二维码添加好友<br>
      回复「咨询」进入会员答疑群</p>
  </div>
</template>

<script setup>

import { ref } from 'vue'
import tokenAxios from "@/http/request/TokenAxios";
import {ElMessage} from "element-plus";


const outerVisible = ref(false)
const innerVisible = ref(false)
const centerDialogVisible = ref(false)

const amountPaid = ref(0.00)

const aliPayParam = ref({money:''})

const paymentPageContent=ref();

const pay = () =>{
  if (amountPaid.value<=0){
    ElMessage.error("请选择充值金额")
    return;
  }
  aliPayParam.value.money = amountPaid.value;
  console.log(aliPayParam)
  tokenAxios.post("http://123.60.129.240:49283/alipay/toPay",aliPayParam.value)
  .then((response)=>{
    ElMessage.success('准备支付')
    paymentPageContent.value=response;

    // // 自动提交支付表单
    // autoSubmitPaymentForm(response);

    // 在新窗口中打开支付页面
    openPaymentPageInNewWindow(response);

  })
}
const openPaymentPageInNewWindow = (htmlContent) => {
  // 创建一个新窗口
  const newWindow = window.open('', '_blank');

  // 将支付页面的 HTML 内容写入新窗口
  newWindow.document.write(htmlContent);

  // 关闭新窗口时清理资源
  newWindow.onbeforeunload = () => {
    newWindow.close();
  };
}
</script>

<style scoped>

.alignment-container {
  width: 830px;
  height: 100px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #f6f6f8;
  padding: 8px;
  border: 1px solid var(--el-border-color);
}

</style>